<template>
	<div>
		<div class="zxs-header">
			<a href="javascript:history.go(-1)">
				<i class="iconfont">&#xe624;</i>
			</a>
			<span>商品详情</span>
			<i class="iconfont">&#xe601;</i>
		</div>

		<!-- <img :src="product.img"/>
		<p>{{product.name}}</p>
		<p>{{product.price | money}}</p>
		<button @click="jian(product)" >-</button><span class="shu" :a="a">{{a}}</span><button @click="add(product)">+</button> -->

		<!-- 轮播图 -->
		<div class="swiper-container">
		    <div class="swiper-wrapper" >
		        
		        <div class="swiper-slide">
		        	<a><img :src="product.img"></a>
		        </div>
		        <div class="swiper-slide">
		        	<a href="https://m.jiuxian.com/mobile/2016/xifeng/index.html"><img src="/static/imgs/258958818f8943ab8a5f1addb7abf6f8.jpg"></a>
		        </div>
			</div>
		    <!-- 如果需要分页器 -->
		    <div class="swiper-pagination"></div>
		</div>
		
		<div class="pinfo">
			<p class="name">
				<i><img src="/static/imgs/jxzy.png"/></i>
				{{product.name}}
				<!-- {{product.productPromo.advWords}} -->
			</p>
			<p class="slogan">{{product.productPromo.advWords}}</p>
			<p class="tag">原装进口</p>
			<p class="price">
				<span class="xprice">
					{{product.productPromo.price | money}}
				</span>
				<span class="yprice">
					{{product.productPromo.jxPrice | money}}
				</span>
			</p>
		</div>

		<div class="sell">
			<div class="num">
				<span>数量</span>
				
				<p class="num1">
					<a @click="jian(product)" >-</a>
					<!-- <span class="shu" :a="a">{{a}}</span> -->
					<input type="text" class="shu" :a="a" v-model="a">
					<a @click="add(product)">+</a>
				</p>
				<p><span>提示:</span>此商品不能使用优惠券</p>
				<p class="baoyou">
					<span><img src="/static/imgs/8efeb2432fcf4bd585dee2b6d3e800f1.png"/>
					正品保障</span>
					<span><img src="/static/imgs/8efeb2432fcf4bd585dee2b6d3e800f1.png"/>
					满包包邮</span>
					<span><img src="/static/imgs/8efeb2432fcf4bd585dee2b6d3e800f1.png"/>
					满包包邮</span>
					<span><img src="/static/imgs/8efeb2432fcf4bd585dee2b6d3e800f1.png"/>
					满包包邮</span>
				</p>
				
			</div>
		</div>

		<div class="pinglun">
			<p class="pingluntitle">
				<span>商品评价</span><span class="du">好评度<i>98%</i></span>
			</p>
			<div class="pingluncon" v-for="p in pinglun">
				<p class="contitle">
					<span class="username">{{p.userName}}</span>
					<span class="rank">酒仙</span>
					<span class="fen">★★★★★</span>
					<time>{{p.createTime}}</time>
				</p>
				<p class="concon">
					{{p.content}}
				</p>
				<ul>
					<li v-for="i in p.imageList" @click="imgS(i.smallImage)">
						<img :src="i.smallImage"/>
					</li>
				</ul>
			</div>
		</div>



		
		<div class="zxs-footer" >
			<ul class="zxs-fl">
				<li>
					<a href="">
						<i class="iconfont">&#xe60a;</i>
						<p>侍酒师</p>
					</a>
				</li>
				<li>
					<a href="">
						<i class="iconfont">&#xe627;</i>
						<p>收藏</p>
					</a>
				</li>
				<li>
					<router-link to="/ca	r">
						<i class="iconfont">&#xe613;</i>
						<p>购物车</p>
					</router-link>
				</li>
			</ul>
			<ul class="zxs-fr">
				<li @click="toCar(product)">
						加入购物车
				</li>
				<li @click="toCar(product)">
						立即购买
				</li>
			</ul>
		</div>
		<div class="allready" v-if="arstate"  @click="arstate=false">
			已添加到购物车
		</div>
		<div v-if="imgshow" @click="imgshow=false" class="bigimg">
			<img :src="sImg"/>
		</div>
		<div class="motai" v-if="imgshow"></div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				product : {
					img : '',
					name : ''
				},
				pinglun:[],
				a : 0,
				arstate : false,
				imgshow : false,
				sImg : ''
			}
		},
		methods:{
			imgS(i){
				this.imgshow = true;
				this.sImg = i;
			},
			add(product){
				this.a++
				if(product.num){
					product.num++
				}else{
					product.num=1
				}
				
				console.log(product,this.a)
			},
			jian(product){
				if(product.num>0){
					this.a--
					product.num--
				}
				
			},
			toCar(product){
				this.arstate=true;
				if(product.num){
					this.$store.commit("toCar",product)
				}
				
				//var a=setTimeout(this.arstate = false,2000)

				
			}
		},
		mounted(){

			let nowid=this.$route.query.deviceId;
			//console.log(nowid)
			this.$http({
			method:"get",
			//url:"http://h5.yztctech.net/api/axf/apihomehot.php"
			url : "/api/m_v1/goods/detailPromo/"+nowid
			}).then(function(res){
				//console.log(res.data)
				this.product = res.data
				// console.log(JSON.parse(res.data).data[nowid])
				//this.product = JSON.parse(res.data).data[nowid]
				this.product.name = this.$route.query.deviceName;
				//console.log(this.product.name)
				this.product.img = this.$route.query.deviceImg;
				
			}),
			this.$http({
				method:"get",
				url:"/api/m_v1/goods/selectIndexEvaluate/"+nowid
			}).then(function(res){
				//console.log(res.data.proEvalList)
				this.pinglun = res.data.proEvalList
			})

		},
		filters : {
		money(val){
			return "¥"+Number(val).toFixed(2)
			}
		}
	}
</script>

<style scoped>
.bigimg{
	position: fixed;
	left: 20%;
	top: 20%;
	width: 6rem;
	z-index: 10;
}
.bigimg img {
	width: 100%;
}
.motai{
	background: rgba(0,0,0,.5);
	width: 100%;
	height: 30rem;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 8;
}
.allready{
	height: 1.5rem;
	line-height: 1.5rem;
	text-align: center;
	width: 4rem;
	background: rgba(0,0,0,.5);
	color: #fff;
	position: fixed;
	top:30%;
	left: 31%;
	font-size: .4rem;
	border-radius: 20px;
	z-index: 10;
}
.swiper-container img{
	width: 100%;
	height: 100%;
}
.shu{
	display: inline;
	width: 1rem;
	border: none;
	text-align: center;
	font-size: .4rem;
	border-left: 1px solid #aaa;
	border-right: 1px solid #aaa;
}
.slogan{
	color: red;
	font-size: .18rem;
}
.pinfo .tag{
	display: inline-block;
	background: cyan;
	border-radius: 5px;
	color: #fff;
	border: 5px solid yellow
}
.sell{
	border-top: .3rem solid #eee;
	border-bottom: .3rem solid #eee;
	padding: .3rem;
	font-size: .4rem;
}
.sell p{
	line-height: 1rem
}
.num1{
	border: 1px solid #aaa;
	display: inline;
	margin-left: .3rem;
}
.num1 a{
	display: inline-block;
	width: .4rem;
	height: .4rem;
	font-size: .5rem;
	text-align: center;
}
.baoyou{
	display: flex;
	justify-content: space-around;
	font-size: .35rem;
	color: #aaa;
}
.baoyou img{
	width: .35rem;
	height: .35rem;
}
.du{
	float: right;
}
.pinglun{
	padding: .3rem;
	
}
.pingluntitle{
	border-bottom: 1px solid #aaa;
	padding: .3rem;
	font-size: .4rem;
}
.pingluntitle i{
	font-style: normal;
	color: red;
	position: relative;
}
.pingluntitle i:after{
	content: "";
	width: .2rem;
	height: .2rem;
	border-bottom: 1px solid;
	border-right: 1px solid;
	transform: rotate(-45deg);
	position: absolute;
	top: .2rem;
}
.pingluncon{
	padding: .3rem;
	border-bottom: 1px solid #aaa;
	font-size: .18rem;
}
.pingluncon span{
	margin-right: .2rem;
}
.rank{
	padding: 0 .1rem;
	border: 1px solid ;
	border-radius: 5px;
}
.fen{
	color: red;
}
.contitle time{
	float: right;
	font-size: .3rem
}
.concon{
	line-height: .8rem;
}
.pingluncon li{
	display: inline-block;
}
.pingluncon li img{
	width: 2rem;
	height: 2rem;
	margin-right: .1rem;
}

.zxs-header{
	background: rgb(229,56,59); 
	height: 1rem;
	position: fixed;
	top:0;
	left: 0;
	right: 0;
	line-height: 1rem;
	font-size: .5rem;
	display: flex;
	justify-content: space-between;
	padding: 0 .3rem;
	color: #fff;
	z-index: 10;
}
.zxs-header a i{
	color: #fff;
}
.swiper-container{
	margin-top: 1rem;
}
.pinfo{
	padding: .3rem;
	font-size: .4rem
}
.pinfo .name{
	line-height: 1rem;
	/*font-size: .3rem;*/
	height: 2rem;
	overflow: hidden;
}
.name i{
	margin-right: .3rem;
}
.pinfo .tag{
	color: red
}
.xprice{
	font-size: .6rem;
	color: red;
	margin-right: .5rem;
}
.yprice{
	text-decoration: line-through;
	color: #aaa;
}





.iconfont{
    font-family:"iconfont" !important;
    font-size:.6rem;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}
.zxs-footer{
	position: fixed;
	height: 1.5rem;
	bottom: 0;
	left: 0;
	right: 0;
	/*padding: .2rem 0;*/
	border-top: 1px solid #aaa;

}
.zxs-footer li{
	height: 100%;
	display: inline-block;
	text-align: center;
}
.zxs-fl{
	float: left;
	background: #fff;
	width: 50%;
	display: flex;
	padding: .2rem 0;
	justify-content: space-around;
}
.zxs-fr{
	width: 50%;
	float: right;
	height: 110%;
}
.zxs-fr li{
	text-align: center;
	font-size: .4rem;
	float: left;
	width: 49.9%;
	background: rgb(229,56,59);
	color: #fff;
	line-height: 1.5rem;
}
.zxs-fr li:last-child{
	background: #3c3f51;
}
	
</style>